<script setup lang='ts'>
import axios, { type AxiosResponse } from 'axios';
import { ref, onMounted } from 'vue'

type BannerList = {
    imgUrl: string
}[]
interface Result {
    code: string
    msg: string
    // Result:{
    //     imgUrl:string
    // }[]
    result: BannerList
}
const list = ref<BannerList>([])
//获取轮播图数据
const getBanner = async () => {
    const res = await axios.get<null, AxiosResponse<Result>>("https://meikou-api.itheima.net/home/banner")
    list.value = res.data.result
}
//挂载周期
onMounted(() => {
    getBanner()
})

const person = ref<{ name: string, age: number }>({ name: '张三', age: 18 })
</script>

<template>
    <div class="container">
        <!-- 循环生成谁 就在上面写v-for -->
        <img v-bind:src="item.imgUrl" v-for="(item) in list" :key="item.imgUrl">

    </div>
    <p>
    <ul>
        <!--v-for遍历对象 -->
        <li v-for="(value, key) in person" :key="key">{{ value }}-{{ key }}</li>
    </ul>
    <ul>
        <!-- v-for遍历数字 -->
        <li v-for="(item, key) in 100" :key="key">{{ item }}</li>
    </ul>
    </p>

</template>

<style scoped>
.container {
    width: 100%;
    height: 200px;
}

.container img {
    width: 300px;
    height: 100%;
    margin: 10px 20px;
}
</style>